<template>
  <scroll-view class="container" scroll-y scroll-top="10" @scrolltolower="loadDown" @scrolltoupper="loadUp">
    <skeleton :skeleton="{name:'studyDetails'}" :showSkeleton="showSkeleton">
      <block slot="content">
        <view v-if="activeIndex==0">
          <view
            class="list__contentin1"
            v-for="(item, index) in metaData"
            :key="index"
            @click="navToDetail(item.id)"
          >
            <view class="list__contentin1-text">
              <view class="text-sign" v-if="item.textIcon!=''">{{ item.textIcon }}</view>
              <view class="text__title">{{ item.title }}</view>
            </view>
          </view>
        </view>

        <view v-if="activeIndex==1">
          <view
            class="list__contentin1"
            v-for="(item, index) in metaData"
            :key="index"
            @click="navToDetailPage(item.id)"
          >
            <view class="list__contentin1-text">
              <view class="text-que">( {{ item.textIcon }} )</view>
              <view class="text__title">{{ item.title }}</view>
            </view>
          </view>
        </view>
        <view class="loading" v-if="noDataShow">没有数据，快去收藏吧~</view>
        
      </block>
    </skeleton>
  </scroll-view>
</template>

<script>
import MineService from "@/services/mine/index";
const service = new MineService();

export default {
  props: {
    currentCode: {
      type: String
    },
    code: {
      type: String
    },
    type: {
      type: Number
    },
    activeIndex: {
      type: Number
    },
    homeCode: {
      type: String
    }
  },
  data() {
    return {
      textShow: false,
      page: 1,
      pageNo: 0,
      metaData: [],
      showSkeleton: true,
      noDataShow: false
    };
  },
  watch: {
    currentCode: function(newVal) {
      if (newVal != this.code) {
        return;
      }
      if (this.metaData.length == 0) {
        this.loadData(1);
      }
    }
  },
  mounted() {
    if (this.code == this.homeCode) {
      this.loadData(1);
    }
  },
  methods: {
    navToDetail(id) {
      uni.navigateTo({
        url: "/pages/tabbar/study/details/index?id=" + id
      });
      return;
    },
    navToDetailPage(item) {
      this.$emit("navToDetailPage", item);
    },
    loadData(page) {
      service.queryMyCollectByCode(page, "20", this.activeIndex).then(res => {
        if (res.result.list.length == 0) {
          this.noDataShow = true;
        } else {
          this.noDataShow = false;
        }

        if (page > 1) {
          this.metaData = [...this.metaData, ...res.result.list];
        } else {
          this.metaData = res.result.list;
        }
        this.pageNo = res.result.pages;
        this.page = page;
      }).then(()=>{
				this.showSkeleton = false;//页面请求完成，取消骨架屏展示
			});
    },
    loadDown() {
      if (this.page == this.pageNo) {
        uni.hideLoading();
        this.textShow = true;
        uni.showToast({
          icon:'none',
          title: "没有更多了~",
          duration: 2000
        });
        return;
      }
      uni.hideLoading();
      const page = this.page + 1;
      this.loadData(page);
    },
    loadUp() {
      this.loadData(1);
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 25upx 0 0 0;
  background-color: #fff;
}
.list__contentin1 {
  border-bottom: 1upx dashed #dddddd;
  padding: 10px 10px;
  margin-bottom: 10px;
  &-text {
    display: flex;

    .text__title {
      flex: 1;
      font-size: 28upx;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      margin-top: 2upx;
    }
    .text-sign {
       // width: 100upx;
      padding: 0 10upx;
      height: 32upx;
      background-color: #4a96f2;
      border-radius: 16upx;
      margin-right: 20upx;
      font-size: 20upx;
      line-height: 32upx;
      text-align: center;
      color: #fff;
      margin-top: 6upx;
    }
    .text-que {
      color: #5ea1f8;
      font-size: 28upx;
      margin-right: 20upx;
    }
  }
}
.list__contentin1:last-child {
  border-bottom: 0;
}

.loading {
  text-align: center;
  font-size: 28upx;
  padding: 20upx 0;
  color: #999;
}
</style>
